<template>
  <h1>v-model</h1>
  <button @click="changeFlag">change Flag {{ flag }}</button>
  <p>{{ title }}</p>
  <br />
  <br />
  <br />
  <br />
  <div>v-model 其实是一个语法糖 通过props 和 emit组合而成的</div>
  <div>
    prop：value -> modelValue； <br />
    事件：input -> update:modelValue； <br />
    v-bind 的 .sync 修饰符和组件的 model 选项已移除 <br />
    新增 支持多个v-model <br />
    新增 支持自定义 修饰符 <br />
  </div>
  <div>v-model使用多个时 用:链接 v-model:title = ''</div>
  <br />

  <Dailog v-model.aaa="flag" v-model:title.xiaochen="title" />
</template>

<script lang="ts" setup>
import Dailog from "./dailog.vue";

let flag = ref(true);
let title = ref("我是标题");

const changeFlag = () => {
  flag.value = !flag.value;
};
</script>

<style lang="less" scoped></style>
